<template>
  <div class="address-main">
    <nav-bar :title="$t('h.地址列表')" />
    <div class="address-home-box">
      <van-swipe-cell v-for="(item,index) in listData">
        <div class="address-box">
          <div class="left">
            <img src="@/assets/image/addreess.png" alt="">
          </div>
          <div class="right">
            <div class="top">
              <span>{{item?.fullname}}</span>
              <span>{{item?.mobile}}</span>
              <span v-if="item.default_address">{{ $t('h.默认') }}</span>
            </div>
            <div class="bottom">
             {{item.shortname}}-{{item.province}}-{{item.city}}-{{item.address}}
            </div>
          </div>
        </div>
        <template #right>
          <div class="button-box">
            <div @click="insertAddress(item.id)" class="button">{{ $t('h.编辑') }}</div>
            <div class="button" @click="remove(item.id)">{{ $t('h.删除') }}</div>
          </div>
        </template>
      </van-swipe-cell>
    </div>
    <div class="button-bottom">
      <van-button @click="insertAddress" color="#002FFF" block>{{ $t('h.新增地址') }}</van-button>
    </div>
  </div>
</template>

<script>
import {getAddress, removeAddress} from '@/api/apiFox';
import {Toast} from 'vant';

export default {
  data() {
    return {
      listData: []
    };
  },
  mounted() {
    this.getListData();
  },
  methods:{
    remove(id){
      removeAddress({
        area_id:id
      }).then(() => {
        Toast.success(this.$t('h.删除成功'))
        this.getListData()
      })
    },
    getListData(){
      getAddress().then(res => {
        this.listData = res.data
      })
    },
    goBack(){
      this.$router.go(-1)
    },
    insertAddress(id){
      this.$router.push({
        path:'/insertAddress',
        query:{
          id:id
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.address-main{
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
  .address-home-box{
    width: 100%;
    padding: 3%;
    height: calc(100% - 51px - 51px - 20px);
    box-sizing: border-box;
    .active{
      border-right: 2px solid #002FFF;
    }
    .address-box{
      width: 100%;
      height: 80px;
      background: #fff;
      box-sizing: border-box;
      //border-radius: 5px;
      display: flex;
      justify-content: space-between;
      .left{
        width: 30px;
        height: 80px;
        padding: 3%;
        box-sizing: border-box;
        img{
          height: 20px;
        }
      }
      .right{
        padding: 3%;
        box-sizing: border-box;
        width: 100%;
        height: 80px;
        .top{
          width: 100%;
          display: flex;
          align-items: center;
          span:nth-child(1){
            font-size: 12px;
          }
          span:nth-child(2){
            font-size: 14px;
            margin-left: 5px;
          }
          span:nth-child(3){
            display: flex;
            padding: 2px 15px;
            border-radius: 10px;
            font-size: 10px;
            margin-left: 10px;
            color: #002FFF;
            background: #fcf2e2;
            border: 1px solid #002FFF;
          }
        }
        .bottom{
          width: 100%;
          padding: 5px 0 5px 0;
          box-sizing: border-box;
          height: 30px;
          font-size: 12px;
          color: #aaa;
        }
      }
    }
    .button-box{
      width: 100px;
      height: 80px;
      background: #002FFF;
      font-size: 14px;
      color: #fff;
      display: flex;

      .button{
        width: 50px;
        height: 80px;
        background: #002FFF;
        font-size: 12px;
        color: #fff;
        border-right: 1px solid #0000ff;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      div:nth-child(1){
        background: #2b64f6;
      }
    }
  }
  .button-bottom{
    width: 100%;
    height: 60px;
    padding: 3%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff;
  }
}
</style>
